// 指标详情
import { defineComponent, ref, watchEffect, reactive } from 'vue';
import './indexDetail.scss';
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';

import ColumnsInfo from './components/columnsInfo/index';
import IndexlibTabs from './components/tabs/index';
import RecentviewList from './components/recentviewList/index';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus/lib/index';
import API from '@/services';

const IndexLibraryDetail = defineComponent({
  name: 'IndexLibraryDetail',
  components: { ArrowDown, ArrowUp, ColumnsInfo, IndexlibTabs, RecentviewList },
  props: {},
  setup: (props, { slots, attrs, emit }) => {
    const loading = ref<boolean>(false);
    // 展开收起
    const expanded = ref<boolean>(false);
    const route = useRoute();

    const detailId = ref(route.query.id);
    const detailObj: any = reactive({ info: {} });

    const joinBusinessMeaning = ref();

    watchEffect(async () => {
      try {
        loading.value = true;
        const { code, data } = await API.atomicMetricsLibrary.getDetail({
          metricsId: detailId.value as any
        });

        if (code === 200) {
          detailObj.info = data;
          expanded.value = true;
          joinBusinessMeaning.value = data?.arithmeticList?.map(
            (v: any) =>
              `${v?.beforeSymbol || ''}${v?.subType
                ? `(${v?.businessMeaning})`
                : v?.businessMeaning || ''
              } ${v?.afterSymbol || ''} ${v?.numInput || ''}`
          );
        }
      } catch (error) {
        // empty block
      }
      loading.value = false;
    });
    // 切换收藏状态
    const toggleFavoriteStatus = async (st: any) => {
      loading.value = true;
      let code, data;
      if (st === 1) {
        ({ code } = await API.favoriteMetrics.putFavoriteMetricsById({
          id: detailObj.info.metricsId
        }));
        if (code === 200) {
          ElMessage.success('取消收藏成功');
          detailObj.info.favoriteStatus = 0;
        } else {
          ElMessage.error('取消收藏失败');
        }
      } else {
        ({ code } = await API.favoriteMetrics.getFavoriteMetricsById({
          id: detailObj.info.id
        }));
        if (code === 200) {
          ElMessage.success('收藏成功');
          detailObj.info.favoriteStatus = 1;
        } else {
          ElMessage.error('收藏失败');
        }
      }
      loading.value = false;
    };

    const toggleExpand = () => {
      expanded.value = !expanded.value;
    };

    return () => {
      return (
        <div class="indexlib-detail-wrap" v-loading={loading.value}>
          <div class="left">
            <div class="header-basic-wrap">
              <div class="basic-info-left">
                <div class="title">
                  {detailObj.info.derivedCnName || detailObj.info.cnName}
                </div>
                <div class="creater-info">
                  <span style="padding-right:8px;">
                    创建人：{detailObj.info.createBy}
                  </span>
                  <span>创建时间：{detailObj.info.createTime}</span>
                </div>
                <div class="business-meaning">
                  <div>
                    业务含义：<span>{joinBusinessMeaning.value}</span>
                    <div>
                      {detailObj.info.businessMeaning
                        ? `【 ${detailObj.info.businessMeaning} 】`
                        : ''}
                    </div>
                  </div>
                </div>
              </div>
              <div class="basic-info-right">
                <div class="btn-wrap">
                  <el-button
                    plain
                    type="primary"
                    onClick={() =>
                      toggleFavoriteStatus(detailObj.info.favoriteStatus)
                    }
                  >
                    <i class="icon-metricsx-custom icon-metricsx-xingbiao-full custom-size"></i>
                    <span style="padding-left:5px;">
                      {detailObj.info.favoriteStatus === 1
                        ? '取消收藏'
                        : '收藏'}
                    </span>
                  </el-button>
                </div>
                <div class="expand-switch">
                  <span class="expand-switch-btn-wrap">
                    <span class="text" onClick={toggleExpand}>
                      {!expanded.value ? '展开' : '收起'}
                    </span>
                    <el-icon>
                      {!expanded.value ? <arrow-down /> : <arrow-up />}
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
            <div class="header-detail-wrap">
              {expanded.value ? (
                <columns-info type="atom" info={detailObj.info} />
              ) : null}
            </div>

            <div class="body-taps-wrap">
              <indexlib-tabs id={detailObj.info.metricsId} isNotAtom={false} />
            </div>
          </div>
          <div class="right">
            <div class="right-content-wrap">
              <recentview-list />
            </div>
          </div>
        </div>
      );
    };
  }
});

export default IndexLibraryDetail;
